<template>
	<div class="layout"
	     :class="{'layout-spread': spread,'layout-pin':pin}">
		<div class="layout-menu">
			<node-menu v-if="$store.state.nodesLoad"
			           ref="menu"
			           :spread="spread"
			           :data="$store.state.nodes"
			           :footer="buildTime"></node-menu>
		</div>
		<div class="layout-body"
		     @click="bodyClick">
			<div class="layout-header">
				<TopHeader @spreadClick="spreadClick"
				           @pinSet="pin=$event"></TopHeader>
			</div>

			<transition-group class="layout-breadcrumb"
			                  name="list-complete"
			                  tag="div">
				<div class="view-tab list-complete-item"
				     :class="{active:$store.state.activePage===page.code}"
				     v-for="page in $store.state.pages"
				     :key="page.code"
				     @click="pageTo(page)">
					{{page.name}}
					<span @click.stop="closePage(page.code)">
						<Icon v-if="$store.state.pages.length>1"
						      type="ios-close-empty"
						      class="icon-close"></Icon>
					</span>
				</div>
			</transition-group>

			<router-view class="layout-content"
			             v-if="$store.state.nodesLoad"
			             :module="$route.params.node||'page'"></router-view>
			<Player></Player>
		</div>
		<!--<BackTop></BackTop>-->
	</div>
</template>

<script>
import NodeMenu from '@/workspace/menu';
import TopHeader from '@/workspace/header';
import $ from '@/common';
import Time from '@/common/time';
import Player from '@/element/audio';
export default {
	name: 'app',
	data() {
		return {
			spread: false,
			login: false,
			buildTime: null,
			pin: true,
		};
	},
	watch: {
		spread(v) {
			$.local('workspace_spread', v);
		},
	},
	created() {
		this.setLinkErrorHandler();
		document.addEventListener('click', e => {
			//时间委托待优化
			var target = e.target;
			if (
				target.classList.contains('click-to-copy') ||
				(target.parentNode && target.parentNode.classList.contains('click-to-copy')) ||
				(target.parentNode &&
					target.parentNode.parentNode &&
					target.parentNode.parentNode.classList.contains('click-to-copy'))
			) {
				$.copyToClip(target.innerText);
				this.$Message.success('复制成功!');
			}
		});
		if ($.local('workspace_spread')) {
			this.spread = true;
		}
		var buildMeta = document.querySelector('meta[name=build]');
		if (buildMeta) {
			this.buildTime = Time.toTime(new Date(buildMeta.attributes.content.value));
		}
		$.Message = this.$Message;
		var user = $.local('user');
		if (user && user[window.App]) {
			$.User = user[window.App];
			this.$store.commit('setUser', $.User);
			//查询节点数据，并进行
			if (!window.NodesData) {
				this.$store
					.dispatch('fetchNodes')
					.then(() => {})
					.catch(() => {
						$.returnToLogin();
					});
			} else {
				this.$store.dispatch('fetchNodes', window.NodesData);
			}
			this.login = true;
		} else {
			this.login = false;
			$.returnToLogin();
		}
	},
	computed: {
		iconSize() {
			return this.spanLeft === 5 ? 14 : 24;
		},
		app_code() {
			return window.App;
		},
	},
	methods: {
		breadText() {
			if (this.$store.state.nodesLoad) {
				return $.nodeList[this.$route.params.node] && $.nodeList[this.$route.params.node].name;
			} else {
				return null;
			}
		},
		spreadClick() {
			this.spread = !this.spread;
		},
		bodyClick() {
			if (this.spread) {
				if (this.$refs.menu) {
					this.$refs.menu.closeFolder();
				}
			}
		},
		pageTo(item) {
			this.$store.commit('pushPage', item);
			this.$router.replace(`/page/${$.getNodeCode(item.code)}`);
		},
		closePage(code) {
			var state = this.$store.state;
			var index = null;
			for (let i = 0; i < state.pages.length; i++) {
				let page = state.pages[i];
				if (page.code && page.code === code) {
					index = i;
					break;
				}
			}
			if (state.activePage === code && index !== null) {
				if (index === 0) {
					this.pageTo(state.pages[1]);
				} else {
					this.pageTo(state.pages[index - 1]);
				}
			}
			this.$store.commit('closePage', code);
		},
		//设置报错方法
		setLinkErrorHandler() {
			//设置promise中未处理的reject的监听
			window.LinkErrorHandler = (res, setting = {}) => {
				if (res && res.status !== undefined) {
					let errorText;
					if (res.data && res.data.error) {
						errorText = res.data.error + '<br>' + res.data.message;
					} else {
						errorText = res.buz_error_msg || res.tech_error_msg;
					}
					this.$nextTick(() => {
						this.$Notice.error({
							title: '请求错误',
							desc: errorText,
						});
					});
					console.warn(`request error:${setting.path}`, res);
					if (res.tech_error_msg && res.tech_error_msg.indexOf('auth error') > -1 && setting.author) {
						$.loginCheck && $.loginCheck(res, setting);
					} else {
						setting.done && setting.done();
					}
				} else {
					var title = '网络连接错误';
					if (typeof res === 'string') {
						title = res;
					}
					this.$nextTick(() => {
						this.$Notice.error({
							title,
						});
					});
					setting.done && setting.done();
				}
			};
		},
	},
	components: {
		NodeMenu,
		TopHeader,
		Player,
	},
};
</script>

<style lang="less">
@menu-width: 200px;
@menu-spread-width: 60px;
.layout {
	border: 1px solid #d7dde4;
	background: #f5f7f9;
	position: relative;
	border-radius: 0;
	overflow: hidden;
	min-height: 100vh;
	&.layout-pin {
		height: 100vh;
	}
	.layout-breadcrumb {
		padding: 10px 10px 0;
	}
	.view-tab {
		border: 1px solid #c4c6ca;
		background: #c4c6ca;
		padding: 3px 16px;
		font-size: 13px;
		border-radius: 2px;
		color: #fff;
		display: inline-block;
		margin-right: 8px;
		cursor: pointer;
		&:hover {
			background: #d2d4d8;
		}
		&.active {
			color: #2d8cf0;
			background-color: #e6f2ff;
			border-color: #94b6da;
			&:hover {
				background-color: #edf6ff;
				color: #449fff;
				border-color: #449fff;
			}
		}
		.icon-close {
			margin-left: 10px;
			margin-right: -8px;
		}
	}
	.layout-content {
		position: relative;
		min-height: 200px;
		margin: 10px 0;
		overflow: hidden;
		background: #fff;
		border-radius: 4px;
		transition-duration: 0.3s;
	}
	.layout-copy {
		text-align: center;
		padding: 0px 0 10px;
		color: #9ea7b4;
	}
	display: flex;
	flex-direction: row;
	.layout-menu {
		background: #464c5b;
		flex: 0 0 @menu-width;
		overflow: hidden;
		transition-duration: 0.3s;
	}
	.layout-body {
		flex-grow: 1;
		flex-basis: 0%;
		/*关键属性 原理暂时不明*/
		overflow: auto;
		display: flex;
		flex-direction: column;
		.layout-content {
			flex-grow: 1;
			margin-bottom: 0;
		}
	}
	.layout-bottom-fixed {
		position: fixed;
		bottom: 0;
		z-index: 2;
		background: #fff;
		box-shadow: 0px 0px 4px 0px rgba(17, 17, 17, 0.4);
		left: @menu-width+2px;
		transition: left 0.3s;
		right: -4px;
		padding: 8px 16px;
	}
	&.layout-spread {
		.layout-bottom-fixed {
			left: @menu-spread-width+2px;
		}
		.layout-menu {
			flex: 0 0 @menu-spread-width;
			/*width: @menu-spread-width;*/
		}
		.layout-body {
			/*margin-left: @menu-spread-width*/
		}
		.menu-text {
			display: none;
		}
		.layout-logo-left .ivu-btn {
			margin-right: 7px;
		}
	}
}

.layout-header {
	height: 45px;
	background: #fff;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

.layout-logo-left {
	width: 90%;
	height: 30px;
	background: #5b6270;
	border-radius: 3px;
	margin: 10px auto;
}

.layout-ceiling-main a {
	color: #9ba7b5;
}

.btn-top {
	line-height: 40px;
}

a .layout-text {
	color: #9ba7b5;
}

.ivu-menu-item-active a .layout-text {
	color: #2d8cf0;
}
body .ivu-notice {
	margin-top: 32px;
}
</style>
